<template>
	<view>
		 <u-navbar
			title="我的"
			@rightClick="rightClick"
			:autoBack="true"
			rightIcon='setting-fill'
			style='background-color: transparent;'
			bgColor='none'
			titleStyle='color:#fff'
			leftIconColor='#fff'
		>
		</u-navbar>
		<div class='my'>

			<div class='top-bg'>
				<img :src="userdata.avatar"></img>
			</div>
			<div class='user-box'>
				<div class='user-content'>
					<div class='userInfo'>
						<u-avatar :src="userdata.avatar" shape="circle" size="60"></u-avatar>
						<p class='nickname'>{{userdata.nickname}}</p>
						<p class='signature'>君子貌少年心，有骨有相，温文尔雅。</p>
					</div>
					<div class='attention'>
						<span @click='noticer'>
							{{attention}}
							<span>关注</span>
						</span>
						<span @click='fans'>
							{{Fans}}
							<span>粉丝</span>
						</span>
						<span>
							{{userdata.praise}}
							<span>点赞</span>
						</span>
					</div>
					<div class='personal' @click='toHomepage'>
						<span>个人主页 ></span>
					</div>
				</div>
			</div>
			<div class='deal'>
				<div class='deal-change'>
					<div :class="show === 1 ? 'active': '' " @click='show = 1'>我卖的</div>
					<div :class="show === 2 ? 'active': '' " @click='show = 2'>我买的</div>
				</div>
				<div class='record'>
					<div>
						<span>购买记录</span>
						<span class='allRecord' @click='toAll(1)'>查看全部></span>
					</div>
					<u-line></u-line>
				</div>
				<div class='order' v-if='show === 2'>
					<div @click='toAll(1)'>
						<u--image :showLoading="true" src="../../static/image/Myicon/订单签收.jpg" width="28px" height="28px" ></u--image>
						订单签收
					</div>
					<div @click='toAll(2)'>
						<u--image :showLoading="true" src="../../static/image/Myicon/已签收.jpg" width="28px" height="28px" ></u--image>
						已签收
					</div>
					<div @click='toAll(3)'>
						<u--image :showLoading="true" src="../../static/image/Myicon/售后.jpg" width="28px" height="28px" ></u--image>
						申请/售后
					</div>
				</div>
				<!-- <button @click="tohomepage">1111</button> -->
			</div>
		</div>
		<!-- <button>111</button> -->
		<tabBar :current-page="4"></tabBar>
	</view>
</template>

<script>
	import tabBar from '../../components/tabBar.vue'
	export default {
		components:{tabBar},
		data() {
			return {
				userdata:{},
				show:2,
				or:null,
				FansList:[],
				attention:null,
				Fans:null
			};
		},
		onLoad() {
			this.userdata = uni.getStorageSync("userInfo");
			// this.userdata = []
			// console.log(this.userdata)
		},
		mounted() {
			this.$api.DLQgetFans().then((res)=>{
				// console.log(res)
				this.FansList = res.data
				this.Fans = this.FansList.length
				this.attention = this.FansList.filter((item)=>item.attention == 1).length
			})
		},
		methods: {
			rightClick() {
				// console.log('rightClick');
				uni.navigateTo({
					url:'/pages/Center/set'
				})
			},
			toAll(v){
				// console.log(v)
				// console.log(this.show)
				this.or = v
				uni.navigateTo({
					url:`/pages/Center/allOrders?v=${this.or}&show=${this.show}`
				})
			},
			// tohomepage(){
			// 	uni.navigateTo({
			// 		url:'/pages/Center/homepage?id=4'
			// 	})
			// },
			toHomepage(){
				uni.navigateTo({
					url:'/pages/Center/homepage'
				})
			},
			noticer(){
				uni.navigateTo({
					url:'/pages/Center/noticer'
				})
			},
			fans(){
				uni.navigateTo({
					url:'/pages/Center/fans'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.my{
		width: 100%;
		position: relative;
		.top-bg{
			>img{
				filter: blur(8px);	
			}
		}
		.user-box{
			// height: 580upx;
			box-sizing: border-box;
			position: absolute;
			width: 100%;
			top: 250upx;
			.user-content{
				margin: 0 40upx;
				background-color: #fff;
				// height: 100%;
				border-radius: 20upx;
				box-shadow: 0px 0px 12upx 4upx #eee;
				box-sizing: border-box;
				padding: 50upx 100upx;
				.userInfo{
					display: flex;
					flex-direction: column;
					align-items: center;
					p{
						margin-top: 12upx;
					}
					.nickname{
						font-size: 30upx;
						color: #000;
					}
					.signature{
						font-size: 26upx;
						color: #ddd;
					}
				}
				.attention{
					margin-top: 36upx;
					display: flex;
					justify-content: space-between;
					span{
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 30upx;
						font-weight: 600;
						>span{
							margin-top: 8upx;
							color: #dadada;
							font-weight: 400;
						}
					}
				}
				.personal{
					margin-top: 80upx;
					text-align: center;
					span{
						border: 2upx solid #2ED8C4;
						padding: 4upx 20upx;
						font-size: 26upx;
						border-radius: 40upx;
						color: #dadada;
					}
				}
			}
		}
		.deal{
			margin: 350upx 40upx 40upx;
			background-color: #fff;
			// height: 280upx;
			border-radius: 20upx;
			box-shadow: 0px 0px 12upx 4upx #eee;
			padding: 0 40upx;
			.deal-change{
				display: flex;
				align-items: center;
				justify-content: space-around;
				height: 80upx;
				font-size: 30upx;
				font-weight: 600;
				.active{
					color: #2ED8C4;
				}
			}
			.record{
				div{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 30upx;
					color: #0e0e0e8f;
					margin-bottom: 20upx;
					.allRecord{
						font-size: 24upx;
						color: #2ED8C4;
					}
				}
			}
			.order{
				display: flex;
				justify-content: space-between;
				padding: 20upx 0;
				div{
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 24upx;
					color: #0e0e0e8f;
				}
			}
		}
	}

::v-deep .u-navbar__content{
	background-color: transparent;
}
	
::v-deep .uicon-setting-fill{
	color: #fff !important;
}
</style>